<template>
    <div id="movetalk">
        <div id="preface" v-if="getDataArr.length == '0'">还未有内容，请先去发表一下先吧！</div>
        <ul>
            <li v-for="(item,index) in getDataArr" :key="item.id">
                <div id="userimg">
                    <span><img :src="item.headimg" alt=""></span>
                </div>
                <div id="content">
                    <h4>{{item.autor}}</h4>
                    <div>
                        <span id="textcontent">{{item.content}}</span>
                        <span id="imggroup">
                            <ul>
                                <li v-for="imgurl in item.img ">
                                    <img :src="imgurl" alt="">
                                </li>

                            </ul>
                        </span>

                    </div>
                    <div id="confooter">
                        <span>{{getTimeDif(item.time)}}
                            <el-button type="text" @click="open(item.id)">删除</el-button>
                            <!-- <span id="talkdel" @touchstart="TalkDel(item.id)">删除</span> -->
                        </span>
                        <div>
                            <div id="showoption" v-show="optionshow == index">
                                <span>
                                    <i class="isActive" ref="ele" @click="likeClick(item.id,$event)"></i>
                                    {{likeNum(item.id,index)}}
                                </span>
                                <span @touchstart="review(index)" @touchend="TouchEnd">
                                    <i src="../assets/images/reviewshow2.png"></i>
                                    评论
                                </span>
                            </div>
                            <span id="options" @touchstart="optionShow(index)"><img src="../assets/images/more.png"
                                    alt=""></span>
                        </div>
                    </div>
                    <div id="revColumn" >
                        <!-- v-if="feelRevData.length =='0'" -->
                        <ul>
                            <li v-for="revitem in feelRevData" v-if="revitem.feelingid ==item.id">
                                <span>{{revitem.autor}}</span>
                                <span>：</span>
                                <span>{{revitem.content}}</span>
                            </li>
                        </ul>
                        
                    </div>
                    <div id="pubRev" v-show="revColumnShow == index">
                        <input type="text" id="revname" placeholder="评论人" v-model="feelData.feelName">
                        <textarea id="revContent" placeholder="说点什么吧！！！" v-model="feelData.feelCon"></textarea>
                        <button @click="publish(item.id)">发表</button>
                    </div>

                </div>

            </li>

        </ul>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                optionshow: -1,
                revColumnShow: -1,
                getDataArr: [],
                feelRevData: [],
                imgData: "",
                likenum: [],
                feelData: {
                    feelName: "",
                    feelCon: "",
                    time: "",
                    feelingid: "",
                },

            }
        },
        computed: {
            //计算时间差
            getTimeDif() {
                return function (time) {
                    let date = new Date(time)
                    let nowDate = new Date()
                    let time1 = nowDate.getTime() - date.getTime()
                    let time2 = Math.floor(time1 / 86400000)
                    let endTime = ""
                    if (time2 <= 0) {
                        endTime = "今日"
                    } else if (time2 < 60) {
                        endTime = time2 + "日前"
                    } else if (60 < time2 < 365) {
                        let time3 = parseInt(time2 / 30);
                        endTime = time3 + "月前"
                    }
                    return endTime
                }
            },
            //计算评论人数
            reviewNum() {
                return function (value) {
                    var j = 0;
                    var newArr = this.feelRevData;
                    for (let i = 0; i < newArr.length; i++) {
                        if (newArr[i].feelingid == value) {
                            j++
                        }
                    }
                    return j
                }
            },
            //计算点赞人数
            likeNum() {
                return function (value, Index) {
                    let Arr = this.likenum;
                    let uuid = localStorage.getItem("userUuid")

                    let count = 0;
                    //计算当前说说的点赞条数
                    Arr.map((a) => {
                        if (a.feelingid == value) {
                            count++
                        }
                        return count
                    })
                    //判断该浏览器登录用户当前说说有没有点过赞
                    if (Arr.length !== 0) {
                        this.$nextTick(() => {
                            let ff = this.$refs.ele
                            // console.log(Arr)

                            for (let i = 0; i < Arr.length; i++) {
                                if (Arr[i].uuid == uuid) {
                                    if (Arr[i].feelingid == value) {
                                        ff[Index].className = "active"
                                    }
                                }
                            }
                        })
                    }

                    return count
                }
            },
        },
        methods: {

            TouchEnd() {
                this.optionshow = -1

            },
            //删除提示框//删除说说
            open(d) {
                let deldata = {
                    "delnum": d
                }
                this.$confirm('此操作将删除该条说说, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    fetch(process.env.VUE_APP_API_URL + "/feelingdel", {
                        method: 'post',
                        body: JSON.stringify(deldata),
                        headers: new Headers({
                            'Content-Type': 'application/json'
                        })
                    })
                        .then((res) => {
                            return res.json()
                            // console.log(res.json())
                        })
                        .then((data) => {
                            this.$router.go(0)

                        })
                        .catch((error) => { console.error('Error:', error) })
                }).then(() => {

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },



            //点赞与评论的显示
            optionShow(i) {
                if (this.optionshow == i) {
                    this.optionshow = -1;
                } else {
                    this.optionshow = i
                    console.log(this.optionshow)
                }
                // console.log(this.likenum)
            },
            //评论栏的显示
            review(i) {
                if (this.revColumnShow == i) {
                    this.revColumnShow = -1;
                } else {
                    this.revColumnShow = i
                    console.log(this.revColumnShow)
                }
                // console.log(this.likenum)
            },
            //删除说说
            // TalkDel(d) {
            //     console.log(d)
            //     let deldata = {
            //         "delnum": d
            //     }
            //     fetch(process.env.VUE_APP_API_URL + "/feelingdel", {
            //         method: 'post',
            //         body: JSON.stringify(deldata),
            //         headers: new Headers({
            //             'Content-Type': 'application/json'
            //         })
            //     })
            //         .then((res) => {
            //             return res.json()
            //             // console.log(res.json())
            //         })
            //         .then((data) => {
            //             this.$router.go(0)

            //         })
            //         .catch((error) => { console.error('Error:', error) })

            // },
            //发表说说评论
            publish(feelingid) {
                let date = new Date()
                let year = date.getFullYear()
                let month = date.getMonth() + 1
                let day = date.getDate()
                let time = year + "-" + month + "-" + day
                this.feelData.time = time;
                this.feelData.feelingid = feelingid;
                if (this.feelData.feelName !== "" && this.feelData.feelCon !== "") {
                    fetch(process.env.VUE_APP_API_URL + "/feelReview", {
                        method: 'post',
                        body: JSON.stringify(this.feelData),
                        headers: new Headers({
                            'Content-Type': 'application/json'
                        })
                    })
                        .then((res) => {
                            return res.json()
                            // console.log(res.json())
                        })
                        .then((data) => {
                            if (data == "发布成功") {
                                alert("发布成功!!!")
                                Object.assign(this.$data.feelData, this.$options.data().feelData)
                                this.$router.go(0)
                            }
                        })
                        .catch((error) => { console.error('Error:', error) })

                } else {
                    alert("请输入评论人和内容！！")
                }
            },
            //点赞
            likeClick(value, e) {
                let likeData = {
                    "ifClick": false,
                    "idNum": value,
                    "useruuid": ""
                }
                likeData.useruuid = localStorage.getItem("userUuid")

                let ele = e.target
                let elepro = e.target.getAttribute("class");

                if (elepro == "isActive") {
                    ele.setAttribute("class", "active");
                    likeData.ifClick = true;
                } else {
                    ele.setAttribute("class", "isActive");
                    likeData.ifClick = false;
                }
                // console.log(likeData
                fetch(process.env.VUE_APP_API_URL + "/feelLike", {
                    method: 'post',
                    body: JSON.stringify(likeData),
                    headers: new Headers({
                        'Content-Type': 'application/json'
                    })
                })
                    .then((res) => {
                        // console.log(res)
                        return res.json()
                    })
                    .then((data) => {
                        // console.log("/////"+data)
                        this.getLike()
                    })
                    .catch((error) => { console.error('Error:', error) })

            },
            //请求点赞数据库
            getLike() {
                let uuid = localStorage.getItem("userUuid")
                let a = { "value": "true", "key": uuid };
                fetch(process.env.VUE_APP_API_URL + "/feelLikeNum", {
                    method: 'post',
                    body: JSON.stringify(a),
                    headers: new Headers({
                        'Content-Type': 'application/json'
                    })
                })
                    .then((res) => {
                        return res.json()

                    })
                    .then((data) => {
                        this.likenum = data
                        // console.log(data)


                    })
                    .catch((error) => { console.error('Error:', error) })
            },

        },
        //请求说说数据
        created() {
            fetch(process.env.VUE_APP_API_URL + "/FrontPage", {
                method: 'post',
                headers: new Headers({
                    'Content-Type': 'application/x-www-form-urlencoded'
                })
            })
                .then((res) => {
                    return res.json()
                })
                .then((data) => {
                    this.getDataArr = data.reverse();
                    // console.log("****"+this.getDataArr.length)
                })
                .catch((error) => { console.error('Error:', error) })
            //请求说说评论数据
            fetch(process.env.VUE_APP_API_URL + "/FrontPageRev", {
                method: 'post',
                headers: new Headers({
                    'Content-Type': 'application/json'
                })
            })
                .then((res) => {
                    return res.json()
                })
                .then((data) => {
                    this.feelRevData = data
                    console.log(this.feelRevData)
                })
                .catch((error) => { console.error('Error:', error) })

            //请求点赞数据
            this.getLike()


        },

    }
</script>
<style scoped>
    .el-popup-parent--hidden>.el-message-box__wrapper>.el-message-box /deep/ {
        width: 80%;
    }

    #movetalk {
        font-size: 16px;
        width: 100%;
        height: 100%;

    }

    #movetalk>ul {
        width: 100%;
        min-height: 45rem;
    }

    #preface {
        font-size: 1.5rem;
    }


    #movetalk>ul>li {
        display: -webkit-flex;
        display: flex;
        /* flex-direction: row; */
        margin-top: 0.5rem;
        flex-basis: 7;
        border-bottom: 1px solid rgb(184, 180, 180);
        justify-content: space-around;

    }

    #userimg {
        /* background-color: crimson; */
        flex-grow: 1;
        width: 15%;
        display: flex;
        justify-content: center;

    }

    #talkdel {
        color: rgb(92, 92, 236);
    }

    #userimg>span {
        width: 3rem;
        height: 3rem;
        /* background-image: url("../assets/images/fan.png"); */
        background-size: 100% 100%;
        /* margin: 0 0.5rem; */

    }

    #userimg>span>img {
        width: 100%;
        height: 100%;
    }

    #content {
        /* background-color: cadetblue; */
        flex-grow: 6;
        width: 85%;
        margin-left: 0.2rem;
        /* margin-bottom: 1rem; */
    }

    #textcontent {
        margin-top: 1rem;
        width: 95%;
        font-size: 18px;

    }

    #imggroup>ul {
        display: flex;
        width: 95%;
        flex-wrap: wrap;
        /* flex-direction: row; */

    }

    #imggroup>ul>li>img {
        width: 6rem;
        height: 6rem;
    }

    #confooter {
        /* background-color: rgb(173, 173, 238); */
        margin: 0.5rem 0;
        width: 96%;
        height: 1.5rem;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

    }
    #confooter .el-button--text{
        font-size: 12px;

    }

    #confooter>span>span {
        font-size: 12px;
        width: 2rem;
        text-align: end;
    }

    #confooter img {
        width: 1rem;
        height: 1rem;
        vertical-align: middle;
    }

    #confooter>div {
        display: flex;
        align-items: center;
    }

    #showoption {
        background-color: rgb(47, 59, 59);
        border-radius: 0.5rem;
        display: flex;
        font-size: 14px;
        color: honeydew;
        align-items: center;
        width: 7rem;
        height: 2rem;
        /* text-align: center; */
    }

    #showoption .isActive {
        display: inline-block;
        background: url("../assets/images/good.png");
        background-size: 100% 100%;
        width: 1.3rem;
        height: 1.3rem;
        vertical-align: middle;

    }

    #showoption .active {
        display: inline-block;
        background: url("../assets/images/redgood.png");
        background-size: 100% 100%;
        width: 1.3rem;
        height: 1.3rem;
        vertical-align: middle;

    }

    #showoption span:last-child>i {
        display: inline-block;
        background: url("../assets/images/reviewshow2.png");
        background-size: 100% 100%;
        width: 1rem;
        height: 1rem;
        vertical-align: middle;

    }

    #showoption>span {
        font-size: 12px;
        margin: auto;
        width: 3.5 rem;
    }

    #options {
        border-radius: 0.1rem;
        width: 2rem;
        height: 2rem;
        /* background-color: gray; */
    }

    #options>img {
        width: 100%;
        height: 100%;
    }

    #revColumn>ul {
        width: 94%;
        background-color: rgba(197, 190, 190, 0.5);
        margin-bottom: 0.2rem;
    }

    #revColumn>ul>li {
        width: 94%;
        margin: 0.2rem 0;
    }

    #pubRev {
        width: 94%;
        display: flex;
        justify-content: space-around;
        margin: 0.5rem 0;
    }

    #revname {
        width: 20%;
        height: 1.55rem;
    }

    #revContent {
        resize: none;
        height: 1.7rem;
        width: 65%;
        border-left: 1px solid grey;
    }

    textarea::placeholder {
        height: 1.7rem;
        line-height: 1.7rem;
    }

    #pubRev>button {
        width: 15%;
        background-color: rgb(50, 114, 225);
        color: rgb(176, 173, 173);
        font-weight: bold;
    }
</style>